<script>
import MAIN_STORE from '@/store/store.js'
window.MAIN_STORE = MAIN_STORE;
import ContextMenu from '@/components/ContextMenu/context-menu.vue';
export default {
  data() {
    return {
      designWidth: 2560,
      designHeight: 1080,
      contextMenuBindData: {
        posX: 0,
        posY: 0,
        show: false
      }
    };
  },
  computed: {
    globalLoading() {
      return this.$store.state.globalLoading
    },
    appInnerStyle() {
      return {
        'width': `${this.designWidth}px`,
        'height': `${this.designHeight}px`,
      }
    }
  },
  watch: {
  },
  created() {
    window.showFrameRate = function (v) {
      if (!window.scene) { return }
      window.scene.debugShowFramesPerSecond = v;
    }
  },
  components: {
    ContextMenu
  },
  mounted() {
    const that = this;

    function resize() {

      that.designHeight = window.innerHeight;
      that.designWidth = window.innerWidth;

      let clientWidth = documentElement.clientWidth;
      let clientHeight = documentElement.clientHeight;

      let dpr = 1;
      let ratio = 1;

      let widthReal;
      let heightReal;
      if ((clientWidth / clientHeight) > (that.designWidth / that.designHeight)) {
        dpr = clientHeight / that.designHeight;
        widthReal = that.designWidth * clientHeight / that.designHeight;
        heightReal = clientHeight;
        ratio = window.innerWidth / 1920;
      } else {
        dpr = clientWidth / that.designWidth;
        widthReal = clientWidth;
        heightReal = clientWidth * that.designHeight / that.designWidth;
        ratio = window.innerHeight / 1080;
      }
      let appDomOuter = document.getElementById('app-outer');
      appDomOuter.style.width = `${widthReal}px`;
      appDomOuter.style.height = `${heightReal}px`;
      window.dpr = dpr;

      let appDomInner = document.getElementById('app-inner');
      appDomInner.style.transform = `scale(${dpr}) translateX(-50%) translateY(-50%)`;
      // documentElement.style.fontSize = 10 * 1 + 'px';
      documentElement.style.fontSize = 10 * clientHeight / 1080 + 'px';
    }
    window.addEventListener('resize', resize)
    setTimeout(() => {
      resize();
      this.init2DViewer();
    }, 0)
  },
  beforeUnmount() {
  },
  methods: {
    showmenu(e) {
      this.contextMenuBindData.posX = e.clientX / 10;
      this.contextMenuBindData.posY = e.clientY / 10;
      this.contextMenuBindData.show = true;
    },
    // 场景初始化 生成全局 scene
    init2DViewer() {
      this.$store.commit('SET_CESIUM_SCENE_CREATED')
      this.init2DMainScene();
    },
    hideBaseImageLayer() {
      const base = viewer.imageryLayers._layers[0];
      if (base) {
        base.alpha = 0;
      }
    },
    loadInOriginView() {
    },
    // 加载主场景
    init2DMainScene() {
      const that = this;
      this.loadInOriginView();
      window.mapIns = MAIN_STORE.GLOBAL_MAP_INS = new ol.Map({
        target: 'map-container',
        layers: new ol.Collection([
          new ol.layer.Group({
            id: 'LAYER_GROUP',
            layers: [
            ]
          })
        ]),
        controls: ol.control.defaults({
          zoom: false
        }),
        view: new ol.View({
          center: [this.$store.state.originView[0], this.$store.state.originView[1]],
          projection: "EPSG:4326",
          zoom: 16,
          minZoom: 0,
          constrainResolution: true,
          maxZoom: 28,
        }),
      });
    }
  },
};
</script>

<template>
  <div id="app-outer">
    <!-- @contextmenu.prevent="showmenu($event)" -->
    <div id="map-container" @click="() => {
      contextMenuBindData.show = false;
    }">
      <!-- <div class="mask-inner">
      </div> -->
    </div>
    <div id="app-inner" :style="appInnerStyle" class="cesium-container-loading" v-loading="globalLoading"
      element-loading-background="rgba(0, 0, 0, 0.5)">
      <!-- 路由 -->
      <div class="router-view has-points-events">
        <RouterView />
      </div>
      <!-- 遮罩 -->
      <div class="mask-custom"></div>
    </div>
    <!-- 右击面板 -->
    <context-menu v-bind="contextMenuBindData"></context-menu>
  </div>


</template>
<style>
.ol-overviewmap {
  bottom: 2.5rem;
  left: 1rem;
  opacity: 0;
  pointer-events: none;
}

</style>

<style lang="less" scoped>
#map-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #101c39;
  &>.mask-inner {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    // background-image: radial-gradient(circle, transparent 0%, rgba(0, 0, 0, 0.5) 50%);
    // background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.5));
    z-index: 1;
    pointer-events: none;
  }
}

#app-inner {
  transform-origin: 0px 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  z-index: 10;
}
.router-view {
  height: 100%;
}
</style>
